﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>重名查询</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" type="text/css" href="/econsole/resource/static/plugins/css/main.css"/>
    <link rel="stylesheet" type="text/css" href="/econsole/resource/wechat/css/frozen.css"/>
    <link rel="stylesheet" type="text/css" href="/econsole/resource/static/plugins/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="/econsole/resource/static/weixin/css/weui.css"/>
    <style type="text/css">
        .main {
            font-size: 1.6em;
            margin: 8px;
        }
        .main .form {
            height: 50px;
            line-height: 50px;
            border: 1px solid #dddddd;
            width: 100%;
            border-radius: 3px;
        }
        .main .form .label {
            height: 50px;
            line-height: 50px;
            color: #157dfb;
            text-indent: 0.8em;
            float: left;
            width: 70px;
        }
        .main .form .element {
            height: 50px;
            line-height: 50px;
            margin-left: 75px;
            display: block;
        }
        .main .form .element input {
            color: #666;
            font-family: "微软雅黑", serif;
            text-indent: 0.3em;
            border: 0;
            width: 98%;
            font-size: 1.0em;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .main .btn:active {
            background-color: #3300ff;
            cursor: hand;
        }
        #result {
            min-height: 6em;
            margin: 0 10px;
            line-height: 2;
            height: 2em;
            color: #837D7D;
        }
        .main .uptop {
            margin-top: -1.6em;
        }
        .tab_title {
            height: 33px;
            border: 1px solid #157dfb;
            border-radius: 6px;
            background-color: #157dfb;
        }

        .tab_title .tab_item {
            width: 50%;
            display: inline-block;
            float: left;
            text-align: center;
            height: 33px;
            line-height: 33px;
            color: #706C6C;
            font-size: 1.6em;
            cursor: hand;
            background-color: #fff;
        }

        .tab_title .checked {
            background-color: transparent;
            color: #fff;
        }

        .tab_title .tab_left {
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }

        .tab_title .tab_right {
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
        }
        .title-bar {
            border: none;
            top: 0;
            height: 2.6em;
            line-height: 2.6em;
            text-indent: 0.4em;
            width: 100%;
            font-size: 1.8em;
            font-weight: 500;
            color: #eaeaea;
            background-color: #000000;
            display: -webkit-box;
            z-index: 999;
        }

        .title-bar .title {
            background-color: #17b4eb;
            -webkit-box-flex: 1;
            text-align: center;
            display: block;
        }

        .title-bar .btn-back {
            background-color: #17b4eb;
            border-top-left-radius: 0.7em;
            display: block;
            width: 3.0em;
            border-right: 1px solid rgba(197, 238, 220, 0.67);
        }

        .title-bar .btn-oper {
            border-top-right-radius: 0.7em;
            background-color: #17b4eb;
            display: block;
            width: 3.0em;
            text-align: center;
            width: -webkit-fit-content;
            min-width: 3.0em;
        }
    </style>

</head>
<body >
<div class="main">

    <div class="form">
        <center>本服务由烟台公安微警务提供</center>
        <span class="label">姓名：</span>
        <form id="cmcxForm" action="https://zwfw.ytga.gov.cn/econsole/api/query/getPageWithToken/cmcx" method="post">
            <span class="element"><input id="name" name="name" class="no-border" type="text" placeholder="请输入要查询的姓名"/></span>
        </form>
    </div>
    <div class="ui-btn-wrap">
        <button class="ui-btn-lg ui-btn-primary"  id="btn_query">查 询</button>
    </div>
</div>


<div class="cmcx_nv" style="display:block;">
    <div class="cmcx_nv_lf">
        <div class="cmcx_tit"> 男女比例</div>
        <div class="cmcx_nv_chart" id="container" style="height: 200px; border: 0px;">
        </div>
    </div>
    <div class="cmcx_nv_rt">
        <div class="cmcx_tit"> 年龄层</div>
        <div class="cmcx_nv_chart" id="years" style="height: 200px; border: 0px;">
        </div>
        <div class="cmcx_nv_chart_mask" style="display:none;">
            由于查询结果过少，<br />
            为保护公民隐私暂不提供此项数据！
        </div>
    </div>
</div>

<div class="cmcx_xz" style="display:block;">
    <div class="cmcx_tit"> 星座分布</div>
    <div class="cmcx_xz_main">
        <div class="cmcx_xz_main_mask" style="display:none;">
            由于查询结果过少，<br />
            为保护公民隐私暂不提供此项数据！
        </div>
        <img src="/econsole/resource/static/plugins/images/cmcx_img.png"/>
        <span class="cmcx_xz_1">0人</span>
        <span class="cmcx_xz_2">0人</span>
        <span class="cmcx_xz_3">0人</span>
        <span class="cmcx_xz_4">0人</span>
        <span class="cmcx_xz_5">0人</span>
        <span class="cmcx_xz_6">0人</span>
        <span class="cmcx_xz_7">0人</span>
        <span class="cmcx_xz_8">0人</span>
        <span class="cmcx_xz_9">0人</span>
        <span class="cmcx_xz_10">0人</span>
        <span class="cmcx_xz_11">0人</span>
        <span class="cmcx_xz_12">0人</span>
    </div>

</div>
<script type="text/javascript" src="/econsole/resource/static/plugins/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/econsole/resource/static/plugins/js/highcharts.js"></script>
<script type="text/javascript" src="/econsole/resource/static/plugins/js/FormValid.js"></script>
<script type="text/javascript" src="/econsole/resource/static/plugins/js/common.js"></script>
<script type="text/javascript">
    //    var _preFix = getServerPreFix();
   //    var theRequest = GetRequest();
    var pieChart;
    var columnChart;
    $(function () {
        pieChart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            tooltip: {
                pointFormat: '<b>{point.y}</b>',
                valueSuffix: '个'
            },
            colors: [
                '#37c4ff',
                '#ff7575'
            ],
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        distance: -5,
                        format: '{point.percentage:.0f} %'
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                name: '占比',
                data: [
                    ["男性", 0], ["女性", 0]
                ]
            }]
        });

        columnChart = new Highcharts.Chart({
            chart: {
                type: 'bar',
                renderTo: 'years'
            },
            xAxis: {
                categories: ['20岁以下', '20-30岁', '30-40岁', '40-50岁', '50-60岁', '60岁以上'],

                title: {text: null}
            },
            colors: [
                '#2dbb37',
                '#47a7de',
                '#4f7ec8',
                '#e27014',
                '#14e288',
                '#529b9e',
            ],
            yAxis: {
                min: 0, title: {text: '', align: 'high'},
                labels: {overflow: 'justify'}
            },
            tooltip: {pointFormat: '<b>{point.y}</b>', valueSuffix: ' 人'},
            credits: {enabled: false},
            series: [{name: '年龄层', colorByPoint: true, data: [0, 0, 0, 0, 0, 0]}]
        });

        $('.cmcx_nv').hide();
        $('.cmcx_xz').hide();

        $('#btn_query').click(function (event) {
            var name = $("#name").val().trim();
            if (name == null || name == "") {
                toast("请输入查询姓名", 1500);
                return;
            }
            $("#cmcxForm").submit();
            event.stopPropagation();
            return false;
        });
        //获得url参数
        var para = GetRequest();

        if (para.name != null) {
            var name = para.name;
            $("#name").val(name);
            if (para.countage1 != null) {
                var data = getDataFromUrl(para);
                setValueToPage(data);
            }
        }
    });


    /***
     * 填入页面结果数据
     * @param data
     */
    function setValueToPage(data) {
        var genderdata = [];
        var male = [];
        var female = [];
        var agesdata = [];
        var num = data.count;
        //男女比例
        male.push("男性");
        male.push(data.genders.countsex1);
        female.push("女性");
        female.push(data.genders.countsex2);
        genderdata.push(male);
        genderdata.push(female);
        pieChart.series[0].setData(genderdata);
//        if(num>3){
        //年龄层
        agesdata.push(data.ages.countage1);
        agesdata.push(data.ages.countage2);
        agesdata.push(data.ages.countage3);
        agesdata.push(data.ages.countage4);
        agesdata.push(data.ages.countage5);
        agesdata.push(data.ages.countage6);
        columnChart.series[0].setData(agesdata);
        //星座分布
        $('.cmcx_xz_1').html(data.constellations.countstar3 + "人");
        $('.cmcx_xz_2').html(data.constellations.countstar4 + "人");
        $('.cmcx_xz_3').html(data.constellations.countstar5 + "人");
        $('.cmcx_xz_4').html(data.constellations.countstar6 + "人");
        $('.cmcx_xz_5').html(data.constellations.countstar7 + "人");
        $('.cmcx_xz_6').html(data.constellations.countstar8 + "人");
        $('.cmcx_xz_7').html(data.constellations.countstar9 + "人");
        $('.cmcx_xz_8').html(data.constellations.countstar10 + "人");
        $('.cmcx_xz_9').html(data.constellations.countstar11 + "人");
        $('.cmcx_xz_10').html(data.constellations.countstar12+ "人");
        $('.cmcx_xz_11').html(data.constellations.countstar1 + "人");
        $('.cmcx_xz_12').html(data.constellations.countstar2 + "人");
        //隐藏遮罩
        $('.cmcx_nv_chart_mask').hide();
        $('.cmcx_xz_main_mask').hide();
//        }else{
//            //年龄层
//            agesdata.push(0);
//            agesdata.push(0);
//            agesdata.push(0);
//            agesdata.push(0);
//            agesdata.push(0);
//            agesdata.push(0);
//            columnChart.series[0].setData(agesdata);
//            //星座分布
//            $('.cmcx_xz_1').html("");
//            $('.cmcx_xz_2').html("");
//            $('.cmcx_xz_3').html("");
//            $('.cmcx_xz_4').html("");
//            $('.cmcx_xz_5').html("");
//            $('.cmcx_xz_6').html("");
//            $('.cmcx_xz_7').html("");
//            $('.cmcx_xz_8').html("");
//            $('.cmcx_xz_9').html("");
//            $('.cmcx_xz_10').html("");
//            $('.cmcx_xz_11').html("");
//            $('.cmcx_xz_12').html("");
//            //显示遮罩
//            $('.cmcx_nv_chart_mask').show();
//            $('.cmcx_xz_main_mask').show();
//        }

        $('.cmcx_nv').show();
        $('.cmcx_xz').show();
    }

    /***
     * 从URL中获得页面数据
     * @param para
     * @returns {Object}
     */
    function getDataFromUrl(para) {
        var data = new Object();
        var ages = new Object();
        var genders = new Object();
        var constellations = new Object();
        var count = new Object();
        count = para.count;
        data.count= count;
        ages.countage1 = parseInt(para.countage1);
        ages.countage2 = parseInt(para.countage2);
        ages.countage3 = parseInt(para.countage3);
        ages.countage4 = parseInt(para.countage4);
        ages.countage5 = parseInt(para.countage5);
        ages.countage6 = parseInt(para.countage6);
        data.ages = ages;
        genders.countsex1 = parseInt(para.countsex1);
        genders.countsex2 = parseInt(para.countsex2);
        data.genders = genders;
        constellations.countstar3 = parseInt(para.countstar3);
        constellations.countstar4 = parseInt(para.countstar4);
        constellations.countstar5 = parseInt(para.countstar5);
        constellations.countstar6 = parseInt(para.countstar6);
        constellations.countstar7 = parseInt(para.countstar7);
        constellations.countstar8 = parseInt(para.countstar8);
        constellations.countstar9 = parseInt(para.countstar9);
        constellations.countstar10 = parseInt(para.countstar10);
        constellations.countstar11 = parseInt(para.countstar11);
        constellations.countstar12 = parseInt(para.countstar12);
        constellations.countstar1 = parseInt(para.countstar1);
        constellations.countstar2 = parseInt(para.countstar2);
        data.constellations = constellations;
        return data;
    }

</script>
</body>

</html>